<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="soccer.css">
</head>

<body>

  <h2>Place superheroes around the soccer field.</h2>

  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>

  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>

  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>

  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>

  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>

  <div id="field">

  </div>

  <div class="hero draggable" id="hero1"></div>
  <div class="hero draggable" id="hero2"></div>
  <div class="hero draggable" id="hero3"></div>
  <div class="hero draggable" id="hero4"></div>
  <div class="hero draggable" id="hero5"></div>
  <div class="hero draggable" id="hero6"></div>

  <img src="https://en.js.cx/clipart/ball.svg" class="draggable">

  <div style="clear:both"></div>

  <script src="soccer.js"></script>
</body>

</html>
